<template>
	<div>
		<Row>
			<i-col span="12">
				<Card>
					<div class="cropper-example cropper-first">
						<cropper :src="exampleImageSrc" crop-button-text="确认提交" @on-crop="handleCroped"></cropper>
					</div>
				</Card>
			</i-col>
		</Row>
	</div>
</template>

<script>
import Cropper from '@/components/cropper';
import { uploadImg } from '@/api/data';
export default {
	name: 'cropper_page',
	components: {
		Cropper
	},
	data() {
		return {
			exampleImageSrc: ''
		};
	},
	methods: {
		handleCroped(blob) {
			const formData = new FormData();
			formData.append('croppedImg', blob);
			uploadImg(formData).then(() => {
				this.$Message.success('Upload success~');
			});
		}
	}
};
</script>

<style lang="less">
.cropper-example {
	height: 400px;
}
</style>
